<template>
  <div id="clientPM">
    <div class="logo">小程序管理</div>
    <ul class="menuCol">
      <!-- <li :class="{'active': this.$store.state.stateCol[0] === 1}"><router-link to="/bannerPage">代理关系</router-link></li>
      <li><router-link to="/">分润统计</router-link></li>
      <li><router-link to="/">体现管理</router-link></li>
      <li><router-link to="/">系统管理</router-link></li> -->
      <li :class="{'active': this.$store.state.stateCol[0] === 1}"><router-link to="/dashboard">概况</router-link></li>
      <li>
        <a @click="toggleNav">商品管理</a>
        <ul style="display:none">
          <li><router-link to="/goodsall">所有商品</router-link></li>
          <li><router-link to="/category">商品分类</router-link></li>
        </ul>
      </li>
      <li>
        <a @click="toggleNav">订单管理</a>
        <ul style="display:none">
          <li><router-link to="/order">我的订单</router-link></li>
        </ul>
      </li>
      <li>
        <a @click="toggleNav">资产管理</a>
        <ul style="display:none">
          <li><router-link to="/">概况</router-link></li>
          <li><router-link to="/">订单记录</router-link></li>
          <li><router-link to="/">体现记录</router-link></li>
        </ul>
      </li>
      <li>
        <a @click="toggleNav">信息中心</a>
        <ul style="display:none">
          <li><router-link to="/">账号信息</router-link></li>
        </ul>
      </li>
    </ul>
    <div class="page">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
  export default{
    name: 'clientPM',
    methods: {
      toggleNav: function (e) {
        var thisEle = e.target
        console.log(thisEle)
        var nextEle = this.nextElement(thisEle)
        console.log(nextEle.style.display)
        if (nextEle.style.display === 'block') {
          nextEle.style.display = 'none'
        } else {
          nextEle.style.display = 'block'
        }
        console.log(nextEle)
      },
      nextElement: function (node) {
        if (node.nextSibling.nodeType === 1) {
          return node.nextSibling
        } else {
          return this.nextElement(node.nextSibling)
          // return null
        }
      }
    }
  }
</script>
<style>
  .logo{
    background: #20222E;
    color: #fff;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    position: fixed;
    left: 0;
    top:0;
    width: 200px;
  }
  .menuCol{
    box-sizing: border-box;
    padding: 20px 0;
    position: fixed;
    left: 0;
    top: 50px;
    bottom: 0;
    width: 200px;
    background: #292C38;
  }
  .menuCol > li > a{
    cursor: pointer;
    display: block;
    padding: 12px 10px 12px 20px;
    color: #737E8D;
    font-weight: bold;
    text-align: left;
    border-bottom: 2px solid #20222E;
  }
  .menuCol > li > a:hover,.menuCol .router-link-exact-active{
    background: #2481e2;
    color:#fff;
  }
  .menuCol > li.active > a {
    color: #fff;
    background: #20222E;
  }
  .menuCol > li ul{
    display: none;
    background: #2c2f40
  }
  .menuCol > li ul a{
    cursor: pointer;
    display: block;
    padding: 15px 0 15px 40px;
    color: #737E8D;
    font-weight: bold;
    text-align: left;
    border-bottom: 1px solid #20222E;
  }
  .menuCol > li ul a:hover{
    background: #2481e2;
    color: #fff;
  }
  #layout .page{
    margin-left: 200px;
    background: #F5F7FA;
    padding: 12px 30px;
  }
</style>
